<template>
	<view>
		<map id="map1" style="width: 100%;height: 800px;"
		 :latitude="latitude" :longitude="longitude" :markers="markers" @markertap="clickMarker"></map>
	</view>
</template>

<script>
	var _self;
	let mapSearch = weex.requireModule('mapSearch')
	export default {
		data() {
			return {
				latitude: 0,
				longitude: 0,
				markers: []
			}
		},
		created(){
			_self = this;
			this.map = uni.createMapContext('map1', this);
			uni.getLocation({
				type: 'gcj02',
				success: (res) => {
					_self.latitude = res.latitude;
					_self.longitude = res.longitude;
					let marker = {
						id: 0,
						latitude: _self.latitude,
						longitude: _self.longitude,
						title: '你在的位置',
						zIndex: '1',
						width: 20,
						height: 20,
						iconPath: '/static/location.png',
						callout: {
							content: '你在的位置',
							color: '#00BFFF',
							fontSize: 14,
							borderRadius: 4,
							borderWidth: 1,
							borderColor: '#333300',
							bgColor: '#CCFF99',
							padding: '5',
							display: 'ALWAYS'
						}
					}
					_self.markers.push(marker)
					let retList = [];
					mapSearch.poiSearchNearBy({
					    point: {
					        latitude: _self.latitude,
					        longitude: _self.longitude
					    },
					    key: '医院',
					    radius: 2500,
						index: 1
					}, ret => {
						for (var i = 0; i < ret.poiList.length; i++) {
							_self.markers.push({
								id: i + 1,
								latitude: ret.poiList[i].location.latitude,
								longitude: ret.poiList[i].location.longitude,
								title: ret.poiList[i].name,
								zIndex: '1',
								width: 20,
								height: 20,
								iconPath: '/static/hospital.png',
								callout: {
									content: ret.poiList[i].name,
									color: '#00BFFF',
									fontSize: 14,
									borderRadius: 4,
									borderWidth: 1,
									borderColor: '#333300',
									bgColor: '#CCFF99',
									padding: '5',
									display: 'ALWAYS'
								}
							})
						}
					})
				}
			});
			
		},
		methods: {
			clickMarker: function(e) {
				_self.markers.forEach(t => {
					if (t.id == e.markerId) {
						uni.openLocation({
							latitude: t.latitude,
							longitude: t.longitude,
							name: t.title,
							success: function () {
							}
						});
					}
				})
			}
		}
	}
</script>

<style>

</style>
